--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit fd1e3d67be7731534c51ffef131348c435f5ecbf
Parents : c8963e3
Author : Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-04-01T02:55:42+03:00
style(components): update font settings and layout for improved readability and consistency across ArchivesPage, MicronEditorPage, and NomadNetworkPage
Changes
4 files changed, 56 insertions(+), 26 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/archives/ArchivesPage.vue b/meshchatx/src/frontend/components/archives/ArchivesPage.vue
index 67ccbe45..ebe47450 100644
--- a/meshchatx/src/frontend/components/archives/ArchivesPage.vue
+++ b/meshchatx/src/frontend/components/archives/ArchivesPage.vue
@@ -491,9 +491,12 @@ export default {
<style scoped>
pre {
- font-family: "JetBrains Mono", "Roboto Mono", monospace;
+ font-family: "Roboto Mono Nerd Font", ui-monospace, monospace;
font-size: 13px;
line-height: 1.5;
+ letter-spacing: normal;
+ font-variant-ligatures: none;
+ font-feature-settings: normal;
}
/* Ensure long pages don't lag the layout */
diff --git a/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue b/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
index 824a32bf..a3ac1aad 100644
--- a/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
+++ b/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
@@ -845,10 +845,11 @@ ${b}=
<style scoped>
.nodeContainer {
- font-family:
- Roboto Mono Nerd Font,
- monospace;
+ font-family: "Roboto Mono Nerd Font", ui-monospace, monospace;
line-height: normal;
+ letter-spacing: normal;
+ font-variant-ligatures: none;
+ font-feature-settings: normal;
}
:deep(.Mu-nl) {
@@ -856,14 +857,36 @@ ${b}=
}
:deep(.Mu-mnt) {
display: inline-block;
- width: 0.6em;
+ box-sizing: border-box;
+ min-width: 1ch;
+ width: 1ch;
+ max-width: 1ch;
text-align: center;
white-space: pre;
text-decoration: inherit;
+ vertical-align: baseline;
+ line-height: 1.25;
+}
+:deep(.Mu-mnt-full) {
+ display: inline-block;
+ box-sizing: border-box;
+ min-width: 2ch;
+ width: 2ch;
+ max-width: 2ch;
+ text-align: center;
+ white-space: pre;
+ text-decoration: inherit;
+ vertical-align: baseline;
+ line-height: 1.25;
}
:deep(.Mu-mws) {
text-decoration: inherit;
- display: inline-block;
+ display: inline-flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ column-gap: 0;
+ row-gap: 0;
+ gap: 0;
}
:deep(a:hover) {
diff --git a/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index f0627ece..5569318a 100644
--- a/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -1624,11 +1624,19 @@ export default {
</script>
<style>
-pre {
- font-family:
- Roboto Mono Nerd Font,
- monospace;
+.nodeContainer {
+ font-family: "Roboto Mono Nerd Font", ui-monospace, monospace;
+ letter-spacing: normal;
+ font-variant-ligatures: none;
+ font-feature-settings: normal;
+}
+
+.nodeContainer pre {
+ font-family: inherit;
line-height: normal;
+ letter-spacing: inherit;
+ font-variant-ligatures: inherit;
+ font-feature-settings: inherit;
}
pre.text-wrap > div {
@@ -1641,15 +1649,13 @@ pre.text-wrap > div > :last-child {
white-space: pre-wrap;
}
-pre a:hover {
+.nodeContainer pre a:hover {
text-decoration: underline;
}
.nodeContainer input[type="text"],
.nodeContainer input[type="password"] {
- font-family:
- Roboto Mono Nerd Font,
- monospace;
+ font-family: inherit;
font-size: 1em;
line-height: 1;
padding: 0;
diff --git a/meshchatx/src/frontend/js/MicronParser.js b/meshchatx/src/frontend/js/MicronParser.js
index 18d4c133..c5fc0f5a 100644
--- a/meshchatx/src/frontend/js/MicronParser.js
+++ b/meshchatx/src/frontend/js/MicronParser.js
@@ -9,9 +9,6 @@ const ALLOWED_URI_REGEXP =
* partial includes, overlay style stripping, wide CJK monospace cells, and lxmf/nomadnetwork in DOMPurify.
*/
export default class MicronParser extends BaseMicronParser {
- static MU_CELL_EM_NARROW = 0.72;
- static MU_CELL_EM_WIDE = 1.22;
-
constructor(darkTheme = true, enableForceMonospace = true) {
super(darkTheme, enableForceMonospace);
if (this.enableForceMonospace) {
@@ -77,8 +74,6 @@ export default class MicronParser extends BaseMicronParser {
const styleEl = document.createElement("style");
styleEl.id = "micron-monospace-styles";
- const n = MicronParser.MU_CELL_EM_NARROW;
- const w = MicronParser.MU_CELL_EM_WIDE;
styleEl.textContent = `
.Mu-nl {
cursor: pointer;
@@ -86,32 +81,35 @@ export default class MicronParser extends BaseMicronParser {
.Mu-mnt {
display: inline-block;
box-sizing: border-box;
- min-width: ${n}em;
- width: ${n}em;
+ min-width: 1ch;
+ width: 1ch;
+ max-width: 1ch;
text-align: center;
white-space: pre;
text-decoration: inherit;
vertical-align: baseline;
- line-height: 1.45;
+ line-height: 1.25;
}
.Mu-mnt-full {
display: inline-block;
box-sizing: border-box;
- min-width: ${w}em;
- width: ${w}em;
+ min-width: 2ch;
+ width: 2ch;
+ max-width: 2ch;
text-align: center;
white-space: pre;
text-decoration: inherit;
vertical-align: baseline;
- line-height: 1.45;
+ line-height: 1.25;
}
.Mu-mws {
text-decoration: inherit;
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
- column-gap: 0.06em;
+ column-gap: 0;
row-gap: 0;
+ gap: 0;
}
`;
document.head.appendChild(styleEl);
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────